<template>
  <div class="dots">
    <Poptip v-model="visable" :options="options" trigger="click" title="商务沟通" content="content" placement="top-start">
      <div class="dot"></div>
      <Timeline slot="content">
        <TimelineItem color="#fe9a00">
          <Icon type="compose" slot="dot"></Icon>
          <div>
            <p class="time">进行评估</p>
            <p class="content">报价及工期</p>
          </div>
        </TimelineItem>
        <TimelineItem color="#fe9a00">
          <Icon type="person-stalker" slot="dot"></Icon>
          <div>
            <p class="time">项目启动会议</p>
            <p class="content">与客户需求沟通确认后，正式成立项目，并启动项目会议</p>
          </div>
        </TimelineItem>
      </Timeline>
    </Poptip>
    <Poptip v-model="visable" :options="options" trigger="click" title="设计沟通" content="content" placement="bottom">
      <div class="dot"></div>
      <Timeline slot="content">
        <TimelineItem color="#fe9a00">
          <Icon type="paintbrush" slot="dot"></Icon>
          <div>
            <p class="time">UE 策划</p>
            <p class="content">提供流程拓扑图，界面交互设计，原型设计等</p>
          </div>
        </TimelineItem>
        <TimelineItem color="#fe9a00">
          <Icon type="images" slot="dot"></Icon>
          <div>
            <p class="time">UI 设计</p>
            <p class="content">提供页面风格设计，色彩、结构等规范</p>
          </div>
        </TimelineItem>
      </Timeline>
    </Poptip>
    <Poptip v-model="visable" :options="options" trigger="click" title="程序开发" content="content">
      <div class="dot"></div>
      <Timeline slot="content">
        <TimelineItem color="#fe9a00">
          <Icon type="code" slot="dot"></Icon>
          <div>
            <p class="time">开发流程</p>
            <p class="content">架构设计，界面布局，数据库设计，功能实现，应用程序开发</p>
          </div>
        </TimelineItem>
      </Timeline>
    </Poptip>
    <Poptip v-model="visable" :options="options" trigger="click" title="测试验收" content="content" placement="bottom">
      <div class="dot"></div>
      <Timeline slot="content">
        <TimelineItem color="#fe9a00">
          <Icon type="clock" slot="dot"></Icon>
          <div>
            <p class="time">功能测试</p>
            <p class="content">测试用例，单元测试，集成测试，系统测试等</p>
          </div>
        </TimelineItem>
        <TimelineItem color="#fe9a00">
          <Icon type="ios-checkmark-outline" slot="dot"></Icon>
          <div>
            <p class="time">用户验收</p>
            <p class="content">客户测试并验收，应用 APP 提交审核上线</p>
          </div>
        </TimelineItem>
      </Timeline>
    </Poptip>
    <Poptip v-model="visable" :options="options" trigger="click" title="后期维护" content="content" placement="top-end">
      <div class="dot"></div>
      <Timeline slot="content">
        <TimelineItem color="#fe9a00">
          <Icon type="gear-a" slot="dot"></Icon>
          <div>
            <p class="time">持续服务</p>
            <p class="content">跟进以及及时帮助客户处理上线后的维护工作</p>
          </div>
        </TimelineItem>
      </Timeline>
    </Poptip>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class Dots extends Vue {
  visable: boolean = true
  options = {
    positionFixed: true,
    modifiers: {
      filp: {
        enabled: false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dots {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 200px 0;

  &:after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 5px;
    background-color: #e5e5ed;
  }

  .dot {
    position: relative;
    width: 32px;
    height: 32px;
    background: #ffffff;
    border-radius: 100%;
    border: 8px solid #730971;
    box-shadow: 0 0 0 8px #e4e4ec80;
    cursor: pointer;
    z-index: 999;

    &:after {
      content: '';
      position: absolute;
      display: block;
      width: 8px;
      height: 8px;
      border: 2px solid #fe9a00;
      box-shadow: 0 0 1px 0 rgba(178, 178, 178, 0.5);
      border-radius: 100%;
      top: 4px;
      left: 4px;
      z-index: 999;
    }

    &:hover:after {
      background-image: radial-gradient(50% -8%, #ffc940 50%, #fe9a00 100%);
    }
  }
}

.time,
.content {
  text-align: left;
}

.time {
  font-weight: bold;
}

/deep/ .ivu-poptip-popper {
  display: block !important;
  transition: none !important;
}
</style>
